
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>玩客狗</title>
    <link rel="stylesheet" type="text/css" href="/static/css/aui.css" />
    <style type="text/css">
        .aui-content-padded {
            padding: 0.75rem;
            background-color: #ffffff;
            margin-top: 0.75rem;
        }
        .aui-col-xs-4 .info {
            font-size: 0.5rem;
            position: absolute;
            left: 0;
            bottom: 0;
            line-height: 0.7rem;
            color: #000;
            white-space: nowrap;
            padding: 2px;
        }
        .aui-col-xs-4 .id {
            position: absolute;
            color: #9b9b9b;
            background-color: #fff;
            left: 0;
            top: 6px;
            font-size: 0.5rem;
            padding: 3px 5px 3px 0;
            border-radius: 0 10px 10px 0;
        }
        .aui-col-xs-4 .aui-label {
            position: absolute;
            color: #ff2b23;
            right: 3px;
            top: 6px;
            font-size: 0.5rem;
            padding: 3px 3px 3px 5px;
            border-radius: 10px 0 0 10px;
        }
        p {font-size: 0.5rem;}


    </style>
</head>
<body>
<section class="aui-content-padded">
    <div class="aui-info aui-margin-t-10 aui-padded-l-10 aui-padded-r-10">
        <div class="aui-info-item">
            <img src="/static/image/logo.png" style="width:1.5rem" class="aui-img-round"><span class="aui-margin-l-5" id="maingou">首页</span>
        </div>
        <div class="aui-info-item aui-searchbar-input aui-border-radius" name="myinfo">
            <input type="search" placeholder="搜索id"  style="width:3.5rem;border: 1px solid #ccc3c3;margin: 0 5px 0 0;" id="search-input">
            <span class="aui-iconfont aui-icon-search"></span>
        </div>
    </div>
</section>
<section class="aui-content aui-grid aui-margin-b-15" name="mylist" style="display: none">
    <div class="aui-row">
        <div class="aui-col-xs-4 aui-border-r">
            <big class="aui-text-warning">0.00<small> wkc</small></big>
            <div class="aui-gird-lable aui-font-size-12">余额</div>
        </div>
        <div class="aui-col-xs-4 aui-border-r">
            <big class="aui-text-danger">0.00<small> 个</small></big>
            <div class="aui-gird-lable aui-font-size-12">小狗数量</div>
        </div>
        <div class="aui-col-xs-4">
            <big class="aui-text-success">0.00<small> wkc</small></big>
            <div class="aui-gird-lable aui-font-size-12">掘金总收益</div>
        </div>
    </div>

    <div class="aui-row">
        <div class="aui-col-xs-4 aui-border-r">
            <big class="aui-text-warning">0.00<small> wkc</small></big>
            <div class="aui-gird-lable aui-font-size-12">冻结</div>
        </div>
        <div class="aui-col-xs-4 aui-border-r">
            <big class="aui-text-danger">0.00<small> %</small></big>
            <div class="aui-gird-lable aui-font-size-12">当前掘金加成</div>
        </div>
        <div class="aui-col-xs-4" onclick="showPopup('bottom')">
            <big class="aui-text-success">。。。</big>
        </div>
    </div>
</section>

<div class="aui-tab" id="goudetailtab"  name="gouDetail"  style="display: none">
    <div class="aui-tab-item aui-active" type="1" >简介</div>
    <div class="aui-tab-item" type="2">喂养</div>
    <div class="aui-tab-item" type="3">掘金</div>
    <div class="aui-tab-item" type="4">挑战</div>
    <div class="aui-tab-item" type="5">合成</div>
    <div class="aui-tab-item" type="6" >族谱</div>
</div>
<section class="aui-content"  name="gouDetail"  style="display: none">
    <div class="aui-list-item-inner">
        <div class="aui-card-list-content-padded" id="gouinfo">

        </div>
    </div>
    <div class="aui-list-item-inner">
        <div class="aui-card-list-content-padded" id="gouopr" style="text-align:center">
            <div class="aui-btn aui-btn-primary">喂养</div>
            <div class="aui-btn aui-btn-primary">挑战</div>
            <div class="aui-btn aui-btn-danger">合成</div>
            <div class="aui-btn aui-btn-danger">出售</div>
            <div class="aui-btn aui-btn-primary">生育</div>
        </div>
        <div class="aui-card-list-content-padded"> <p class="aui-ellipsis-2">除喂养、出售外，其他操作请事先准备好要操作的小狗编号</p></div>
    </div>

</section>
<div class="aui-tab" id="tab" name="goulist">
    <div class="aui-tab-item aui-active" type="1" name='myalllist'>全部</div>
    <div class="aui-tab-item" type="2">集市</div>
    <div class="aui-tab-item" type="3">鹊桥</div>
    <div class="aui-tab-item" type="4">挑战</div>
    <div class="aui-tab-item" type="5">合成</div>
    <div class="aui-tab-item" type="6" style="display: none" name='marketlist'>拍卖</div>
    <div class="aui-tab-item" type="9" name='myalllist'>历史</div>
</div>
<section class="aui-content" name="goulist">
    <div class="aui-list-item-inner">
        <div class="aui-row aui-row-padded" id="goulist">

        </div>
    </div>
</section>
<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item aui-active" tapmode>
        <i class="aui-iconfont aui-icon-home"></i>
        <div class="aui-bar-tab-label">首页</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="aui-iconfont aui-icon-star"></i>
        <div class="aui-bar-tab-label">广场</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <div class="aui-dot"></div>
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">我的</div>
    </div>
</footer>
</body>
<script type="text/javascript" src="/static/script/api.js" ></script>
<script type="text/javascript" src="/static/script/aui-tab.js" ></script>
<script type="text/javascript" src="/static/script/aui-popup-new.js" ></script>
<script type="text/javascript" src="/static/script/aui-toast.js" ></script>
<script type="text/javascript" src="/static/script/jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    }
    var toast = new auiToast();
    function showDefault(type){
        switch (type) {
            case "success":
                toast.success({
                    title:"提交成功",
                    duration:2000
                });
                break;
            case "fail":
                toast.fail({
                    title:"提交失败",
                    duration:2000
                });
                break;
            case "custom":
                toast.custom({
                    title:"提交成功",
                    html:'<i class="aui-iconfont aui-icon-laud"></i>',
                    duration:2000
                });
                break;
            case "loading":
                toast.loading({
                    title:"加载中",
                    duration:2000
                },function(ret){
                    console.log(ret);
                    setTimeout(function(){
                        toast.hide();
                    }, 3000)
                });
                break;
            default:
                // statements_def
                break;
        }
    }

    var gmaintype = 1;
    var tab = new auiTab({
        element:document.getElementById("footer")
    },function(ret){
        console.log(ret);
        if(ret){
            document.getElementById("maingou").textContent = ret.index;
            if(ret.index == 3){
                $("[name='mylist']").show();
                $("[name='goulist']").hide();
                document.getElementById("maingou").textContent = "我的";
            }else{
                $("[name='mylist']").hide();
                $("[name='goulist']").show();
                if(ret.index == 1){
                    document.getElementById("maingou").textContent = "首页";
                    $("[name='myalllist']").show();
                    $("[name='marketlist']").hide();
                }else if(ret.index == 2){
                    document.getElementById("maingou").textContent = "广场";
                    $("[name='myalllist']").hide();
                    $("[name='marketlist']").show();
                }
            }
            $("[name='gouDetail']").hide();

            gmaintype = ret.index;
            if(gmaintype==2 && opnowIndex==1){
                loadinfo(gmaintype,2,1,'');
            }else if(gmaintype==1 && opnowIndex>5){
                loadinfo(gmaintype,1,1,'');
            }else if(gmaintype==3){
                console.log("待完善");
            }else{
                loadinfo(gmaintype,opnowIndex,1,'');
            }

        }
    });

    function toclor(c16) {
        var sColor = c16;
        var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        if (sColor && reg.test(sColor)) {
            if (sColor.length === 4) {
                var sColorNew = "#";
                for (var i = 1; i < 4; i += 1) {
                    sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
                }
                sColor = sColorNew;
            }
            //处理六位的颜色值
            var sColorChange = [];
            for (var i = 1; i < 7; i += 2) {
                sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
            }
            return "RGB(" + sColorChange.join(",") + ")";
        } else {
            return sColor;
        }
    }
    function loadinfo(maintype,nowIndex,page,searchid) {
       console.log(nowIndex);
       toast.loading({
                    title:"加载中",
                    duration:2000
                },function(ret){
                    console.log(ret);
                    setTimeout(function(){
                        toast.hide();
                    }, 1000)
                });
       $.get("/dog?maintype="+maintype+"&type="+nowIndex+"&page="+page+"&searchid="+searchid,dataType="json",function(data,status){
           $("#goulist div").remove();

           console.log("html: " + $("#goulist").html());
           var count = 0;
           $.each(data, function(i, item) {
            var html_tmp = '<div class="aui-col-xs-4"  onclick="gouDetail('+item.id +')">'+
                    '<img src="/static/image/gou.png" style="background:'+item.Background+';">'
                     +'<div class="id">'+ item.id + '</div>' +
                    '<div  class="info"><p>' + item.desc    + "<p>2.58•91.08kg</p></div>" +
                    '<div class="aui-label aui-label-primary">' + item.id + '</div>';
            //console.log("i: " + i + "\nitem: " + item.desc+"\n html:"+html_tmp+"\n htmltest:"+html_test);
            $("#goulist").append(html_tmp);
            count ++;

            });
           if(count==0){
            var html_tmp = '<div style="text-align:center" ><img style="display:inline" src="/static/image/nodata.svg"></div>';
           $("#goulist").append(html_tmp);
           }

           toast.hide();
       });
    }


    var opnowIndex = 1;
    var tab1 = new auiTab({
        element:document.getElementById("tab"),
    },function(ret){
        console.log(ret);
        opnowIndex = ret.index;
        loadinfo(gmaintype,ret.index,1,'');
    });

    var opnowgouid = 1;
    var goudetailtab = new auiTab({
        element:document.getElementById("goudetailtab"),
    },function(ret){
        console.log(ret);
        opnowIndex = ret.index;
        loaddetailinfo(gmaintype,ret.index,opnowgouid);
    });

    function loaddetailinfo(maintype,type,opnowgouid){
        console.log(opnowgouid+"解析"+type);
        $("#gouinfo div").remove();
        if(type != '1'){
            var html_tmp = '<div style="text-align:center" ><img style="display:inline" height="180" width="180" src="/static/image/nodata.svg"></div>';
            $("#gouinfo").append(html_tmp);
        }else{
            var html_tmp = '<div class="aui-list-item-text">'+
                           ' <p class="aui-ellipsis-2">'+gdesc+'</p>'+
                        '</div>';
            $("#gouinfo").append(html_tmp);
        }
    }

    var popup = new auiPopup();
    function showPopup(location){
        popup.init({
            frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
            location:location,//位置，top(默认：顶部中间),top-left top-right,bottom,bottom-left,bottom-right
            buttons:[{
                image:'/static/image/share/wx.png',
                text:'转账',
                value:'wx'//可选
            },{
                image:'/static/image/share/wx-circle.png',
                text:'提现',
                value:'wx-circle'
            },{
                image:'/static/image/share/qq.png',
                text:'交易明细',
                value:'qq'
            },{
                image:'/static/image/share/qzone.png',
                text:'收支记录',
                value:'qq-qzone'
            },{
                image:'/static/image/share/sina-weibo.png',
                text:'修改昵称'
            }],
        },function(ret){
            if(ret){
                document.getElementById("button-index").textContent = ret.buttonIndex;
                document.getElementById("button-value").textContent = ret.buttonValue;
            }
        })
    }

    var gdesc = '';
    function gouDetail(opid) {
        $.get("/dog/"+opid+"/?maintype="+gmaintype+"&type="+opnowIndex,dataType="json",function(data,status){
            $("#gouinfo div").remove();

           //console.log("html: " + $("#goulist").html());
           var count = 0;
            var html_tmp = '<div class="aui-list-item-text">'+
                           ' <p class="aui-ellipsis-2">'+data.desc+'</p>'+
                        '</div>';
            gdesc = data.desc;
            //console.log("i: " + i + "\nitem: " + item.desc+"\n html:"+html_tmp+"\n htmltest:"+html_test);
            $("#gouinfo").append(html_tmp);
            count ++;

               document.getElementById("maingou").textContent = "#"+opid;
               $("div[name='myinfo']").hide();
               $("[name='gouDetail']").show();
               $("[name='goulist']").hide();

           toast.hide();
       });
    }

    $(document).ready(function(){
      loadinfo(1,1,1,'');
      $(".aui-icon-search").click(function(){
          var search = $('#search-input').val();
          if(search == "" || isNaN(search)){
              $('#search-input').val("");
          }else{
              loadinfo(gmaintype,opnowIndex,1,search);
          }
      });
    });
</script>
</html>